<div class="settings-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <h1>Malware Blocker</h1>
  </div>

  <!-- Loading/Error State Component -->
  <app-loading-error-state
    *ngIf="malwareBlockerLoading() || malwareBlockerLoadError()"
    [loading]="malwareBlockerLoading()"
    [error]="malwareBlockerLoadError()"
    loadingMessage="Loading settings..."
    errorMessage="Could not connect to server"
  ></app-loading-error-state>

  <!-- Settings Form -->
  <form *ngIf="!malwareBlockerLoading() && !malwareBlockerLoadError()" [formGroup]="malwareBlockerForm" class="p-fluid">
    
    <p-card styleClass="settings-card h-full">
      <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
          <div class="header-title-container">
            <h2 class="card-title m-0">Malware Blocker Configuration</h2>
            <span class="card-subtitle">Configure automatic content filtering and blocking</span>
          </div>
        </div>
    </ng-template>

    <div class="card-content">
      <!-- Main Settings -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon"
             (click)="openFieldDocs('enabled')"
             title="Click for documentation"></i>
          Enable Malware Blocker
        </label>
        <div class="field-input">
          <p-checkbox formControlName="enabled" [binary]="true" inputId="cbEnabled"></p-checkbox>
          <small *ngIf="hasNoBlocklistConfiguredError()" class="form-error-text">At least one blocklist must be configured</small>
          <small class="form-helper-text">When enabled, the Malware blocker will run according to the schedule</small>
        </div>
      </div>

      <!-- Scheduling Mode Toggle -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('useAdvancedScheduling')" 
             title="Click for documentation"></i>
          Scheduling Mode
        </label>
        <div class="field-input">
          <p-selectButton
            formControlName="useAdvancedScheduling"
            [options]="scheduleModeOptions"
            optionLabel="label"
            optionValue="value"
            [allowEmpty]="false"
            [multiple]="false"
          >
          </p-selectButton>
          <small class="form-helper-text">Choose between basic scheduling or advanced cron expression</small>
        </div>
      </div>

      <!-- Basic Schedule Controls - shown when useAdvancedScheduling is false -->
      <div class="field-row" formGroupName="jobSchedule" *ngIf="!malwareBlockerForm.get('useAdvancedScheduling')?.value">
        <label class="field-label">
          Run Schedule
        </label>
        <div class="field-input">
          <div class="schedule-input flex flex-wrap">
            <span class="schedule-label">Every</span>
            <p-select 
              formControlName="every"
              [options]="getScheduleValueOptions()"
              optionLabel="label"
              optionValue="value"
              placeholder="Select interval"
            ></p-select>

            <p-selectButton
              formControlName="type"
              [options]="scheduleUnitOptions"
              optionLabel="label"
              optionValue="value"
              [allowEmpty]="false"
              [multiple]="false"
            >
            </p-selectButton>
          </div>
          <small *ngIf="hasNestedError('jobSchedule', 'every', 'required')" class="form-error-text">This field is required</small>
          <small class="form-helper-text">How often the Malware Blocker should run</small>
        </div>
      </div>

      <!-- Advanced Schedule Controls - shown when useAdvancedScheduling is true -->
      <div class="field-row" *ngIf="malwareBlockerForm.get('useAdvancedScheduling')?.value">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('cronExpression')" 
             title="Click for documentation"></i>
          Cron Expression
        </label>
        <div class="field-input">
          <input type="text" pInputText formControlName="cronExpression" placeholder="0 0/5 * ? * * *" />
          <small *ngIf="hasError('cronExpression', 'required')" class="form-error-text">Cron expression is required</small>
          <small class="form-helper-text">Enter a valid Quartz cron expression (e.g., "0 0/5 * ? * * *" runs every 5 minutes)</small>
        </div>
      </div>

      <!-- Ignored Downloads -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon"
             (click)="openFieldDocs('ignoredDownloads')"
             title="Click for documentation">
          </i>
          Ignored Downloads
        </label>
        <div class="field-input">
          <app-mobile-autocomplete
            formControlName="ignoredDownloads"
            placeholder="Add download pattern"
          ></app-mobile-autocomplete>
          <small class="form-helper-text">Downloads matching these patterns will be ignored (e.g. hash, tag, category, label, tracker)</small>
        </div>
      </div>

      <!-- Content Blocker Specific Settings -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('ignorePrivate')" 
             title="Click for documentation"></i>
          Ignore Private
        </label>
        <div class="field-input">
          <p-checkbox formControlName="ignorePrivate" [binary]="true"></p-checkbox>
          <small class="form-helper-text">When enabled, private torrents will not be processed</small>
        </div>
      </div>

      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('deletePrivate')" 
             title="Click for documentation"></i>
          Delete Private from client
        </label>
        <div class="field-input">
          <p-checkbox formControlName="deletePrivate" [binary]="true"></p-checkbox>
          <small class="form-helper-text">Disable this if you want to keep private torrents in the download client even if they are removed from the arrs</small>
        </div>
      </div>

      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('deleteKnownMalware')" 
             title="Click for documentation"></i>
          Delete Known Malware
        </label>
        <div class="field-input">
          <p-checkbox formControlName="deleteKnownMalware" [binary]="true"></p-checkbox>
          <small class="form-helper-text">When enabled, downloads matching known malware patterns will be deleted</small>
        </div>
      </div>

      <!-- Arr Service Settings in Accordion -->
      <p-accordion [multiple]="false" [value]="activeAccordionIndices" styleClass="mt-3">
        <!-- Sonarr Settings -->
        <p-accordion-panel [disabled]="!malwareBlockerForm.get('enabled')?.value" [value]="0">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Sonarr Settings
              @if (sectionHasErrors(0)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div formGroupName="sonarr">
              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('sonarr.enabled')" 
                     title="Click for documentation"></i>
                  Enable Sonarr Blocklist
                </label>
                <div class="field-input">
                  <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
                  <small class="form-helper-text">When enabled, the Sonarr blocklist will be used for content filtering</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('sonarr.blocklistPath')" 
                     title="Click for documentation"></i>
                  Blocklist Path
                </label>
                <div class="field-input">
                  <input fluid pInputText formControlName="blocklistPath" placeholder="Local file path or URL" />
                  <small *ngIf="hasNestedError('sonarr', 'blocklistPath', 'required')" class="form-error-text">Path is required when Sonarr blocklist is enabled</small>
                  <small class="form-helper-text">Path to the blocklist file or URL</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('sonarr.blocklistType')" 
                     title="Click for documentation"></i>
                  Blocklist Type
                </label>
                <div class="field-input">
                  <p-select
                    formControlName="blocklistType"
                    [options]="[
                      { label: 'Blacklist', value: 'Blacklist' },
                      { label: 'Whitelist', value: 'Whitelist' }
                    ]"
                    optionLabel="label"
                    optionValue="value"
                    appendTo="body"
                  ></p-select>
                  <small class="form-helper-text"
                    >Type of blocklist: Blacklist (block matches) or Whitelist (only allow matches)</small
                  >
                </div>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Radarr Settings -->
        <p-accordion-panel [disabled]="!malwareBlockerForm.get('enabled')?.value" [value]="1">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Radarr Settings
              @if (sectionHasErrors(1)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div formGroupName="radarr">
              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('radarr.enabled')" 
                     title="Click for documentation"></i>
                  Enable Radarr Blocklist
                </label>
                <div class="field-input">
                  <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
                  <small class="form-helper-text">When enabled, the Radarr blocklist will be used for content filtering</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('radarr.blocklistPath')" 
                     title="Click for documentation"></i>
                  Blocklist Path
                </label>
                <div class="field-input">
                  <input fluid pInputText formControlName="blocklistPath" placeholder="Local file path or URL" />
                  <small *ngIf="hasNestedError('radarr', 'blocklistPath', 'required')" class="form-error-text">Path is required when Radarr blocklist is enabled</small>
                  <small class="form-helper-text">Path to the blocklist file or URL</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('radarr.blocklistType')" 
                     title="Click for documentation"></i>
                  Blocklist Type
                </label>
                <div class="field-input">
                  <p-select
                    formControlName="blocklistType"
                    [options]="[
                      { label: 'Blacklist', value: 'Blacklist' },
                      { label: 'Whitelist', value: 'Whitelist' }
                    ]"
                    optionLabel="label"
                    optionValue="value"
                    appendTo="body"
                  ></p-select>
                  <small class="form-helper-text"
                    >Type of blocklist: Blacklist (block matches) or Whitelist (only allow matches)</small
                  >
                </div>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Lidarr Settings -->
        <p-accordion-panel [disabled]="!malwareBlockerForm.get('enabled')?.value" [value]="2">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Lidarr Settings
              @if (sectionHasErrors(2)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div formGroupName="lidarr">
              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('lidarr.enabled')" 
                     title="Click for documentation"></i>
                  Enable Lidarr Blocklist
                </label>
                <div class="field-input">
                  <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
                  <small class="form-helper-text">When enabled, the Lidarr blocklist will be used for content filtering</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('lidarr.blocklistPath')" 
                     title="Click for documentation"></i>
                  Blocklist Path
                </label>
                <div class="field-input">
                  <input fluid pInputText formControlName="blocklistPath" placeholder="Local file path or URL" />
                  <small *ngIf="hasNestedError('lidarr', 'blocklistPath', 'required')" class="form-error-text">Path is required when Lidarr blocklist is enabled</small>
                  <small class="form-helper-text">Path to the blocklist file or URL</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('lidarr.blocklistType')" 
                     title="Click for documentation"></i>
                  Blocklist Type
                </label>
                <div class="field-input">
                  <p-select
                    formControlName="blocklistType"
                    [options]="[
                      { label: 'Blacklist', value: 'Blacklist' },
                      { label: 'Whitelist', value: 'Whitelist' }
                    ]"
                    optionLabel="label"
                    optionValue="value"
                    appendTo="body"
                  ></p-select>
                  <small class="form-helper-text"
                    >Type of blocklist: Blacklist (block matches) or Whitelist (only allow matches)</small
                  >
                </div>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Readarr Settings -->
        <p-accordion-panel [disabled]="!malwareBlockerForm.get('enabled')?.value" [value]="3">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Readarr Settings
              @if (sectionHasErrors(3)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div formGroupName="readarr">
              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('readarr.enabled')" 
                     title="Click for documentation"></i>
                  Enable Readarr Blocklist
                </label>
                <div class="field-input">
                  <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
                  <small class="form-helper-text">When enabled, the Readarr blocklist will be used for content filtering</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('readarr.blocklistPath')" 
                     title="Click for documentation"></i>
                  Blocklist Path
                </label>
                <div class="field-input">
                  <input fluid pInputText formControlName="blocklistPath" placeholder="Local file path or URL" />
                  <small *ngIf="hasNestedError('readarr', 'blocklistPath', 'required')" class="form-error-text">Path is required when Readarr blocklist is enabled</small>
                  <small class="form-helper-text">Path to the blocklist file or URL</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('readarr.blocklistType')" 
                     title="Click for documentation"></i>
                  Blocklist Type
                </label>
                <div class="field-input">
                  <p-select
                    formControlName="blocklistType"
                    [options]="[
                      { label: 'Blacklist', value: 'Blacklist' },
                      { label: 'Whitelist', value: 'Whitelist' }
                    ]"
                    optionLabel="label"
                    optionValue="value"
                    appendTo="body"
                  ></p-select>
                  <small class="form-helper-text"
                    >Type of blocklist: Blacklist (block matches) or Whitelist (only allow matches)</small
                  >
                </div>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Whisparr Settings -->
        <p-accordion-panel [disabled]="!malwareBlockerForm.get('enabled')?.value" [value]="4">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Whisparr Settings
              @if (sectionHasErrors(4)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div formGroupName="whisparr">
              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('whisparr.enabled')" 
                     title="Click for documentation"></i>
                  Enable Whisparr Blocklist
                </label>
                <div class="field-input">
                  <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
                  <small class="form-helper-text">When enabled, the Whisparr blocklist will be used for content filtering</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('whisparr.blocklistPath')" 
                     title="Click for documentation"></i>
                  Blocklist Path
                </label>
                <div class="field-input">
                  <input fluid pInputText formControlName="blocklistPath" placeholder="Local file path or URL" />
                  <small *ngIf="hasNestedError('whisparr', 'blocklistPath', 'required')" class="form-error-text">Path is required when Whisparr blocklist is enabled</small>
                  <small class="form-helper-text">Path to the blocklist file or URL</small>
                </div>
              </div>

              <div class="field-row">
                <label class="field-label">
                  <i class="pi pi-question-circle field-info-icon" 
                     (click)="openFieldDocs('whisparr.blocklistType')" 
                     title="Click for documentation"></i>
                  Blocklist Type
                </label>
                <div class="field-input">
                  <p-select
                    formControlName="blocklistType"
                    [options]="[
                      { label: 'Blacklist', value: 'Blacklist' },
                      { label: 'Whitelist', value: 'Whitelist' }
                    ]"
                    optionLabel="label"
                    optionValue="value"
                    appendTo="body"
                  ></p-select>
                  <small class="form-helper-text"
                    >Type of blocklist: Blacklist (block matches) or Whitelist (only allow matches)</small
                  >
                </div>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>
      </p-accordion>

      <!-- Action buttons -->
      <div class="card-footer mt-3">
        <button
          pButton
          type="button"
          label="Save"
          icon="pi pi-save"
          class="p-button-primary"
          [disabled]="(!malwareBlockerForm.dirty || !hasActualChanges) || malwareBlockerForm.invalid || malwareBlockerSaving()"
          [loading]="malwareBlockerSaving()"
          (click)="saveMalwareBlockerConfig()"
        ></button>
        <button
          pButton
          type="button"
          label="Reset"
          icon="pi pi-refresh"
          class="p-button-secondary p-button-outlined ml-2"
          (click)="resetMalwareBlockerConfig()"
        ></button>
      </div>
    </div>
  </p-card>
  </form>
</div> 